<!-- 模糊搜索框 -->
<template>
  <div class="select-page" @touchmove.prevent @click="$emit('hide', null)">
    <div class="select_page_search cenFlex" @click.stop="1 + 1">
      <div class="select_page_search_l cenFlex">
        <van-icon name="search" />
      </div>
      <div class="select_page_search_m">
        <input
          type="search"
          v-model="value"
          placeholder="请输入搜索关键词点击搜索"
          @search="onSearch"
        />
      </div>
      <div class="select_page_search_r sbFlex">
        <div class="select_page_search_r_btn" @click.stop="onSearch">搜索</div>
        <div @click="$emit('hide', null)">取消</div>
      </div>
    </div>
    <!-- <van-search v-model="value" @click.stop="1+1" show-action placeholder="请输入搜索关键词" @search="onSearch">
      <template #action>
        
      </template>
    </van-search> -->
    <div class="select_page_content">
      <div
        class="select_page_content_in bm"
        @click.stop="emitClick(item.name)"
        v-for="(item, i) in searchList"
        :key="i"
      >
        <span>{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api/login";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    apiType: { type: String },
  },
  data() {
    //这里存放数据
    return {
      value: "",
      searchList: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    onSearch() {
      switch (this.apiType) {
        case "city":
          this._apiCityList();
          break;
        case "school":
          this._apiSchoolList();
          break;
      }
    },
    emitClick(name) {
      const data = {
        key: this.apiType,
        name,
      };
      this.$emit("editSearch", data);
      this.$emit("hide", null);
    },
    _apiCityList() {
      api.apiCityList({ name: this.value }).then((res) => {
        if (res.code === 0) {
          this.searchList = [...res.page.list];
        }
      });
    },
    _apiSchoolList() {
      api.apiSchoolList({ name: this.value }).then((res) => {
        if (res.code === 0) {
          this.searchList = [...res.page.list];
        }
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
.select-page {
  width: 100vw;
  height: 100vh;
  background: #fff;
  position: fixed;

  top: 0px;
  left: 0px;
  z-index: 1;
  padding: 5px 20px;
  padding-top: 50px;
  animation: downPage 0.3s linear;
  input::-webkit-input-placeholder {
    color: #aeaeae;
    font-size: 14px;
    /* font-family: 'Helvetica', 'Arial', "\5b8b\4f53", sans-serif; */
    font-family: "Microsoft YaHei";
  }

  textarea::-webkit-input-placeholder {
    color: #aeaeae;
    font-size: 14px;
    /* font-family: 'Helvetica', 'Arial', "\5b8b\4f53", sans-serif; */
    font-family: "Microsoft YaHei";
  }
  .select_page_search {
    width: 100%;
    height: 33px;
    .select_page_search_l {
      min-width: 20px;
      height: 100%;
    }
    .select_page_search_m {
      width: 100%;
      height: 100%;
      padding-left: 10px;
    }
    .select_page_search_r {
      width: 80px;
      min-width: 80px;
      font-size: 14px;
      .select_page_search_r_btn{
        color:$niceblue
      }
    }
  }
  .select_page_content {
    width: 100%;
    .select_page_content_in {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      &:nth-child(1) {
        border-top: 1px #aeaeae solid;
      }
    }
  }
}
@keyframes downPage {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0%);
  }
}
</style>
